<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>会员信息管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--引入本地的css样式-->
  <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../static/css/admin.css" media="all">

</head>
<body>
<!--容器-->
<div class="layui-fluid">
  <!--   选项卡- 卡片风格-->
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
        <!-- layui-block layui-inline-->
        <div class="layui-inline">
          <label class="layui-form-label">会员姓名</label>
          <div class="layui-input-block">
            <input type="text" id="memberName" name="memberName" placeholder="请输入姓名"  class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">电话号码</label>
          <div class="layui-input-block">
            <input type="text" id="memberPhone" name="memberPhone" placeholder="请输入电话号码"  class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">生日范围</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input"  id="memberStartTime" readonly placeholder="请输入时间">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline">
            <input type="text" class="layui-input"  id="memberEndTime" readonly placeholder="请输入时间">
          </div>
        </div>

      </div>
    </div>
      <div class="layui-form-item" style="text-align: center">
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"> 查询</i>
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">
      <!--头部工具栏-->
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layuiadmin-btn-admin" lay-event="add">新增</button>
          <button class="layui-btn layuiadmin-btn-admin" lay-event="delete">Excel导出</button>
          <button class="layui-btn layuiadmin-btn-admin" lay-event="update">Excel导入</button>
        </div>
      </script>

      <!--数据表格-->
      <table class="layui-hide" id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>
      <!-- laytpl模板引擎 数据库性别字段 1转换成男显示到页面；2转换成女显示到页面 -->
      <script type="text/html" id="SexTpl">
        {{#  if(d.memberSex == 1){ }}
        <span>男</span>
        {{#  } else if(d.memberSex == 2){ }}
        <span>女</span>
        {{#  } }}
      </script>
      <!-- laytpl模板引擎 数据库状态字段1转换成正常显示到页面；2转换成冻结显示到页面 3转换成删除显示到页面 -->
      <script type="text/html" id="statusTpl">
        {{#  if(d.status == 1){ }}
        <span>正常</span>
        {{#  } else if(d.status == 2){ }}
        <button type="button" class="layui-btn-xs layui-btn-disabled">冻结</button>
        {{#  } else if(d.status == 3){ }}
        <button type="button" class="layui-btn-xs layui-btn-danger">删除</button>
        {{#  } }}
      </script>


      <script type="text/html" id="buttonTpl">
        {{#  if(d.check == true){ }}
        <button class="layui-btn layui-btn-xs">已审核</button>
        {{#  } else { }}
        <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
        {{#  } }}
      </script>

      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        {{#  if(d.role == '超级管理员'){ }}
        <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        {{#  } }}
      </script>
      <!-- 侧边工具栏-->
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>


    </div>
  </div>
</div>

<script src="../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
  layui.config({
    base: '../static/layui/layuiadmin/' //静态资源所在路径js
  }).extend({
    index: 'lib/index' //主入口模块
  }).use('index');
</script>

<script type="text/javascript">

  layui.use(['table','form','laydate','laytpl'],function () {
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var laytpl=layui.laytpl;

    // 初始化laydate时间控件
    laydate.render({
      elem: '#memberStartTime',
      type: 'datetime',
      trigger: 'click',
    });
    laydate.render({
      elem: '#memberEndTime',
      type: 'datetime',
      trigger: 'click',
    });

    // 指定时间的范围
    laydate.render({
      elem: '#memberStartTime',
      type: 'datetime',
      max: 0,
      done: function(value, date){
        // 限制结束时间的最小值
        end.min = new Date(date.year, date.month - 1, date.date, 0, 0, 0, 0);
        end.start = end.min;
      }
    });

    laydate.render({
      elem: '#memberEndTime',
      type: 'datetime',
      max: 0,
      done: function(value, date){
        // 限制开始时间的最大值
        if (!start.max || start.max < date) {
          start.max = new Date(date.year, date.month - 1, date.date, 23, 59, 59, 999);
        }
      }
    });

    // 监听表单提交事件
    form.on('submit(LAY-user-back-search)', function(data){
      // 获取表单数据，并提交到后台
      var memberStartTime = data.field.memberStartTime;
      var memberEndTime = data.field.memberEndTime;
      return false;
    });

    //分页查询
    table.render({
      elem:'#LAY-user-back-manage',//绑定table的id值
      url:'http://localhost:8181/member/listAllMemberPage',//请求接口的路径
      title:'成员数据表',
      toolbar:'#toolbarDemo',//开启头部工具栏
      cols:[[
        {field:"id",fixed:"id",title:"会员id",sort:true,width:120},
        {field:"memberNumber",title:"会员序号",width:120},
        {field:"memberName",title:"会员姓名"},
        {field:"memberSex",title:"性别",templet:'#SexTpl',width: 60},
        {field:"memberBirth",title:"会员生日"},
        {field:"memberPhone",title:"会员电话"},
        {field:"memberAddress",title:"会员地址"},
        {field:"memberStartTime",title:"办理时间"},
        {field:"memberEndTime",title:"到期时间"},
        {field:'right',title:"操作",toolbar:'#barDemo',width:200},
      ]],
      //开启分页
      page:true,
      limits:[5,10,15,20]
    })
    $("#btn_search").click(function () {
      //获取姓名和身份证号码值
      var memberName = $("#memberName").val();
      var memberPhone = $("#memberPhone").val();

      //表格重载LAY-user-back-manageLAY-user-back-manage
      table.reload('LAY-user-back-manage',{
        url:'http://localhost:8181/member/listAllMemberPage',
        page:{
          curr:1//重写从第一页刷新
        },
        where:{
          memberName:memberName,
          memberPhone:memberPhone,

        }
      })
    });
    //监听数据表格头部工具栏的新增：点击新增按钮，弹出层弹出的是add.html
    table.on('toolbar(LAY-user-back-manage)',function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      console.log(checkStatus);
      switch (obj.event) {
        case 'add':
          layer.open({
            type:2,//iframe
            title:'添加成员信息',
            content:'memberAdd.html',
            area:['450px','500px'],
            maxmin:true,
            // btn:['确定','取消'],
            yes:function (index, layero) {
              //获取add.html子页面（list.html是父页面）
              var body = layer.getChildFrame('body', index);
              //获取页面中表单输入框的数据
              var submitData = body.find('#myform').serialize();
              //发起Ajax异步请求
              $.ajax({
                url:"http://localhost:8181/member/insertMember",
                type:"post",
                data:submitData,
                dataType:"json",
                success:function (res) {//res响应回来的数据code msg
                  if(res.code==200){
                    layer.msg(res.msg,{
                      offset:"15px",
                      icon:1,
                      time:1000
                    },function () {
                      //刷新页面-页面也要显示新增的数据
                      window.location.reload();
                    })
                  }
                  if(res.code==500){
                    layer.msg(res.msg,{
                      offset:"15px",
                      icon:1,
                      time:1000
                    },function () {
                      //刷新页面-页面也要显示新增的数据
                      window.location.reload();
                    })
                  }
                  //关闭Layer弹出层
                  layer.close(index);
                }
              })
            }

          })
      }
    })
    table.on('tool(LAY-user-back-manage)', function(obj){
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'del'){        //删除
        layer.confirm('确定删除吗？', function(index){
          //使用Jquery的Ajax的异步请求
          $.ajax({
            url: "http://localhost:8181/member/deleteMemberById",//请求路径
            type:"post",
            data:{id:data.id},  //前端请求给后端的参数
            dataType: "json",  //响应数据格式
            success:function (res){ //res是回应的数据
              //弹出提示信息
              layer.alert(res.msg);
              // 删除对应行的 DOM 结构，并更新缓存
              obj.del();
              //关闭弹出层
              layer.close(index);
            }
          })
        });
      } else if(layEvent   === 'edit'){
        //编辑
        layer.open({
          type:2,//iframe
          title:'编辑成员信息',
          content:'editMember.html',
          area:['450px','500px'],
          maxmin:true,
          // btn:['确定','取消'],
          yes:function (index, layero) {
            //获取edit.html子页面
            var body = layer.getChildFrame('body', index);
            //获取页面中表单输入框的数据
            var submitData = body.find('#myform').serialize();
            //发起Ajax异步请求
            $.ajax({
              url: "http://localhost:8181/member/updateMemberById",
              type: "post",
              data: submitData,
              dataType: "json",
              success: function (res) { //res响应回来的数据code msg
                if (res.code == 200) {
                  layer.msg(res.msg, {
                    offset: "15px",
                    icon: 1,
                    time: 1000
                  }, function () {
                    //刷新页面-页面也要显示新增的数据
                    window.location.reload();
                  })
                }
                if (res.code == 500) {
                  layer.msg(res.msg, {
                    offset: "15px",
                    icon: 1,
                    time: 1000
                  }, function () {
                    //刷新页面-页面也要显示新增的数据
                    window.location.reload();
                  })
                }
                //关闭Layer弹出层
                layer.close(index);
              }
            })
          },
          //做页面数据回显
          success:function(layero,index) {
            //获取edit子页面
            var body = layer.getChildFrame('body', index);
            //得到iframe页的窗口对象，需要把回显的数据渲染在iframe层的edit页面表单中
            var iframeWin = window[layero.find('iframe')[0]['name']];
            //输入框的回显
            body.find("input[name=id]").val(data.id);  //id是隐藏的
            body.find("input[name=memberName]").val(data.memberName);  //memberName
            body.find("input[name=memberType]").val(data.memberType);  //memberType
            body.find("input[name=memberPassword]").val(data.memberPassword);   //password
            body.find("input[value="+data.memberSex+"]").attr("checked","checked"); // sex
            body.find("input[name=memberBirth]").val(data.memberBirth);  //memberBirth
            body.find("input[name=memberPhone]").val(data.memberPhone);  //memberPhone
            body.find("input[name=memberAddress]").val(data.memberAddress);  //memberAddress
            body.find("input[name=memberStartTime]").val(data.memberStartTime);  //memberAddress
            body.find("input[name=memberEndTime]").val(data.memberEndTime);  //memberAddress


          },
        })

      }

      // 同步更新缓存对应的值
      // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
    });
  })
</script>

</body>
</html>


